<script setup>
import navItems from "@/navigation/vertical";
import { themeConfig } from "@themeConfig";

// Components
import Footer from "@/layouts/components/Footer.vue";
import NavBarNotifications from "@/layouts/components/NavBarNotifications.vue";
import NavSearchBar from "@/layouts/components/NavSearchBar.vue";
import NavbarShortcuts from "@/layouts/components/NavbarShortcuts.vue";
import NavbarThemeSwitcher from "@/layouts/components/NavbarThemeSwitcher.vue";
import UserProfile from "@/layouts/components/UserProfile.vue";
import NavBarI18n from "@core/components/I18n.vue";

// @layouts plugin
import { VerticalNavLayout } from "@layouts";
import { useRouter, useRoute } from "vue-router";
import { watch } from "vue";
const router = useRouter();
const route = useRoute();
let newNavItems = navItems;
const username = localStorage.getItem("username");
if (username !== 'admin') {
  newNavItems = newNavItems.filter((item) => item.title !== "收支管理" && item.title !== "简报管理"&& item.title !== "阈值管理");
}

const redDiv = ref(true);
// watch(
//   () => route,
//   (newRoute) => {
//     // 处理路由变化的逻辑
//     if (newRoute.path === "/dashboards/crm") {
//       redDiv.value = true;
//     } else {
//       redDiv.value = false;
//     }
//   },
//   { deep: true }
// );

const activeButton = ref(1);
const toggleButton = (buttonNumber) => {
  activeButton.value = buttonNumber;
};

const buttonClass = (buttonNumber) => {
  return activeButton.value === buttonNumber ? "active-class" : "";
};
</script>

<template>
  <VerticalNavLayout :nav-items="newNavItems">
    <!-- 👉 navbar -->
    <template #navbar="{ toggleVerticalOverlayNavActive }">
      <div class="d-flex h-100 align-center">
        <IconBtn
          id="vertical-nav-toggle-btn"
          class="ms-n3 d-lg-none"
          @click="toggleVerticalOverlayNavActive(true)"
        >
          <VIcon size="26" icon="tabler-menu-2" />
        </IconBtn>
        <div>
          {{ themeConfig.app.navbar_title1 }}
        </div>
        <!-- <NavSearchBar class="ms-lg-n3" /> -->

        <VSpacer />
        <!-- <div v-show="redDiv">
          <VBtn
            class="addBtn"
            density="compact"
            @click="toggleButton(1)"
            :class="buttonClass(1)"
          >
            中招国际
            <svg
              v-show="activeButton === 1"
              xmlns="http://www.w3.org/2000/svg"
              class="icon icon-tabler icon-tabler-arrows-left-right"
              width="44"
              height="44"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M21 17l-18 0" />
              <path d="M6 10l-3 -3l3 -3" />
              <path d="M3 7l18 0" />
              <path d="M18 20l3 -3l-3 -3" />
            </svg>
          </VBtn>
          <VBtn
            class="addBtn"
            density="compact"
            @click="toggleButton(2)"
            :class="buttonClass(2)"
          >
            中招工业
            <svg
              v-show="activeButton === 2"
              xmlns="http://www.w3.org/2000/svg"
              class="icon icon-tabler icon-tabler-arrows-left-right"
              width="44"
              height="44"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M21 17l-18 0" />
              <path d="M6 10l-3 -3l3 -3" />
              <path d="M3 7l18 0" />
              <path d="M18 20l3 -3l-3 -3" />
            </svg>
          </VBtn>
          <VBtn
            class="addBtn"
            density="compact"
            @click="toggleButton(3)"
            :class="buttonClass(3)"
          >
            中国招标
            <svg
              v-show="activeButton === 3"
              xmlns="http://www.w3.org/2000/svg"
              class="icon icon-tabler icon-tabler-arrows-left-right"
              width="44"
              height="44"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M21 17l-18 0" />
              <path d="M6 10l-3 -3l3 -3" />
              <path d="M3 7l18 0" />
              <path d="M18 20l3 -3l-3 -3" />
            </svg>
          </VBtn>
        </div> -->

        <!-- <NavBarI18n
          v-if="themeConfig.app.i18n.enable && themeConfig.app.i18n.langConfig?.length"
          :languages="themeConfig.app.i18n.langConfig"
        /> -->
        <NavbarThemeSwitcher class="me-1" />
        <!-- <NavbarShortcuts /> -->
        <!-- <NavBarNotifications class="me-1" /> -->
        <UserProfile />
      </div>
    </template>

    <!-- 👉 Pages -->
    <slot />

    <!-- 👉 Footer -->
    <template #footer>
      <Footer />
    </template>

    <!-- 👉 Customizer -->
    <TheCustomizer />
  </VerticalNavLayout>
</template>

<style lang="scss" scoped>
.addBtn {
  background-color: #ddd !important;
  color: black !important;
  margin-inline-start: 10px;
}

.active-class {
  background: rgb(var(--v-theme-primary)) !important;
  // background: linear-gradient(to right, rgb(68, 68, 231), rgb(67, 153, 235)) !important;
  color: #fff !important;
}
</style>
